<template>
  <a-modal
    v-model:visible="visible"
    title="批量备注"
    width="500px"
    title-align="start"
    align-center
    render-to-body
    :mask-closable="false"
    class="dmo-common-dialog"
    @close="closed"
  >
    <div class="secret-level-ara">
      <a-form
        ref="secretFormRef"
        :rules="rulesChild"
        :disabled="false"
        label-align="left"
        :model="secretForm"
      >
        <a-form-item label="备注" field="remark">
          <a-textarea
            v-model="secretForm.remark"
            placeholder="请输入"
            allow-clear
          />
        </a-form-item>
        <slot name="moreList" />
      </a-form>
    </div>

    <template #footer>
      <a-button @click="closed">{{ '取消' }}</a-button>
      <a-button type="primary" :disabled="importLoading" @click="save">{{
        '确认'
      }}</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted, defineEmits } from 'vue';
  import {
    batchDemandUpdateRemark,
    batchDemandUpdateRemarkList,
  } from '@/api/purchase-demand/supportDemandReceive';
  import { Message } from '@arco-design/web-vue';

  const emit = defineEmits(['closeDrawer', 'success']);
  const props = defineProps({
    selection: {
      type: Array,
      default: null,
    },
    rowData: {
      type: Object,
      default: null,
    },
    tabParam: {
      type: Object,
      default: null,
    },
  });
  const secretFormRef = ref();
  const secretForm = ref({
    remark: '',
  });
  const importLoading = ref<boolean>(false);
  const visible = ref(true);
  const rulesChild = ref({
    remark: [
      {
        required: true,
        message: '请输入',
        trigger: ['blur', 'change'],
      },
    ],
  });

  onMounted(() => {
    console.log('');
  });
  const save = async () => {
    const result = await secretFormRef.value.validate();
    if (result) {
      return;
    }
    const api = props.rowData
      ? batchDemandUpdateRemark
      : batchDemandUpdateRemarkList;
    let params: any = null;
    if (props.rowData) {
      params = {
        id: props.rowData.id,
        requireNo: props.rowData.requireNo,
        materialCode: props.rowData.materialCode,
        remark: secretForm.value.remark,
        ...props.tabParam,
      };
    } else {
      params = props.selection.map((item: any) => {
        const temp = {
          id: item.id,
          requireNo: item.requireNo,
          materialCode: item.materialCode,
          remark: secretForm.value.remark,
          ...props.tabParam,
        };
        return temp;
      });
    }
    const res: any = await api(params);
    if (res.code === 200) {
      Message.success('备注成功');
      emit('success');
    }
  };
  const closed = () => {
    secretFormRef.value.resetFields();
    secretFormRef.value.clearValidate();
    emit('closeDrawer');
  };
</script>

<style lang="less">
  .dmo-common-dialog {
    .arco-modal-header {
      height: 56px;
      color: #1e2228;
    }

    .arco-modal-body {
      padding: 16px 24px;

      .arco-row {
        flex-direction: column;

        .arco-col {
          width: 100%;
        }
      }
    }

    .arco-modal-footer {
      padding: 9px 20px;
    }
  }
</style>
